<template>
  <div class="beneficiary-account" :class="{ readonly: $route.query.readonly }">
    <el-select
      v-model="checkedData"
      filterable
      value-key="bankCardUniqueness"
      clearable
      :placeholder="parameter.promptTemplate"
      :disabled="!currency || readonly"
      @change="changeData()"
    >
      <el-option
        v-for="item in getBankCardData(
          beneficiaryAccountBankList,
          'beneficiaryAccount'
        )"
        :key="item.accountBank"
        :label="
          item.accountBank +
          item.accountNumber +
          $t('【') +
          item.accountName +
          $t('】')
        "
        :value="item"
      >
      </el-option>
    </el-select>
    <span v-if="!$route.query.readonly">{{ bankGetAccount() }}</span>
  </div>
</template>
<script>
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'beneficiaryAccount',
  props: {
    detail: {
      typr: Object,
      default: () => {
        return {}
      },
    },
    currentForm: {
      typr: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      typr: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      beneficiaryAccountBankList: [],
      checkedData: {},
      recipientParty: {},
      currency: null,
      rules: {
        beneficiaryAccount: [
          {
            required: this.parameter.state === 4,
            validator: (rule, value, callback) => {
              if (this.parameter.state != 4 && this.parameter.fillFlag != 0) {
                callback()
                return
              }
              if (this.checkedData.accountBank) {
                callback()
              } else {
                callback(new Error(this.$t('请选择收款方账户')))
                return
              }
            },
            trigger: 'change',
            type: 'object',
          },
        ],
      },
      readonly: false,
      isInit: true,
    }
  },
  created() {
    let vm = this
    let value = {}
    this.readonly = Boolean(this.$route.query.readonly) || this.disabled
    if (vm.value) {
      value = JSON.parse(vm.value) || {}
      vm.checkedData = value
        ? {
            ...value,
            bankCardUniqueness: value.accountNumber + vm.currency,
          }
        : {}
      vm.beneficiaryAccountBankList = [
        {
          ...vm.checkedData,
        },
      ]

      vm.getBankCardData(vm.beneficiaryAccountBankList)
    }
    eventBus.$on('changeaccount', (parameter, data) => {
      //必须是抬头信息的塞到抬头信息里面，支付条款的塞到支付条款里面
      if (parameter.parameterPosition !== vm.parameter.parameterPosition) {
        return
      }
      // if(data.length < vm.checkedPayerAccount.length){
      //     vm.checkedPayerAccount.splice(index, 1);
      //     return;
      // }
      if (parameter.parameterNumber === 'recipientParty') {
        let hasChekced = false
        vm.beneficiaryAccountBankList = (
          data.bankCardInfos ||
          data.bankCardResults ||
          []
        ).map((it) => {
          if (!hasChekced) {
            hasChekced =
              it.accountNumber + vm.currency ===
              vm.checkedData.bankCardUniqueness
          }
          return {
            ...it,
          }
        })
        if (!hasChekced) {
          vm.checkedData = {}
        }
        vm.recipientParty = data
      }
    })
    eventBus.$on('changeCurrency', (parameter, data) => {
      //必须是抬头信息的塞到抬头信息里面，支付条款的塞到支付条款里面
      if (
        parameter.parameterPosition &&
        parameter.parameterPosition !== vm.parameter.parameterPosition
      ) {
        return
      }
      vm.currency = data ? data : null
      if (vm.isInit) {
        vm.checkedData.bankCardUniqueness =
          vm.checkedData.accountNumber + vm.currency
        vm.isInit = false
      } else {
        vm.checkedData = {}
      }

      vm.$nextTick(() => {
        vm.getBankCardData(vm.beneficiaryAccountBankList)
      })
    })
    this.$emit('setrules', this.parameter, {
      [this.parameter.parameterNumber]: this.rules.beneficiaryAccount,
    })
  },
  methods: {
    getBankCardData(list) {
      if (!list) {
        list = []
      }
      let obj = {
        1: 'CNY',
        2: 'USD',
      }
      let newarr = list
        .filter((it) => {
          return (
            !this.currency ||
            (it.currency &&
              (it.currency.indexOf(this.currency + '') != -1 ||
                it.currency.indexOf(obj[this.currency]) != -1))
          )
        })
        .map((it) => {
          return {
            ...it,
            bankCardUniqueness: it.accountNumber + this.currency,
          }
        })
      return newarr
    },
    bankGetAccount() {
      let text = ''
      if (this.recipientParty.code) {
        text =
          (this.recipientParty.code || '') +
          (this.recipientParty.fullName || '')
      }
      return text
    },
    changeData() {
      this.$emit('input', this.checkedData)
    },
    getData() {
      return {
        accountBank: this.checkedData.accountBank,
        accountNumber: this.checkedData.accountNumber,
        accountName: this.checkedData.accountName,
        partyCode: this.recipientParty.code,
      }
    },
  },
}
</script>
<style lang="scss">
.beneficiary-account {
  &.readonly {
    .el-select {
      width: 100%;
    }
  }
  .sale-accounteeParty-div {
    display: flex;
    margin-bottom: 12px;
    .el-icon-remove {
      font-size: 24px;
      cursor: pointer;
      align-self: center;
      margin-left: 8px;
    }
    &:last-child {
      margin-bottom: 0px;
    }
  }
}
</style>
